<template>
  <div class="payment-code">
    <div class="main">
      <div class="title">{{ token }}</div>
      <div class="pic">
        <canvas canvas-id="qrcode" style="width: 100%;height: 100%;" />
      </div>
      <div class="tips">请向商家出示您的二维码进行核销</div>
      <!-- <div class="close-btn" @click="goBack"></div> -->
    </div>
    <div class="footer-box" v-if="codeType == 1">
      <div class="left">
        <text class="icon"></text>
        <text class="txt">美粉币</text>
        <text class="number">{{ userInfo.amount_name }}</text>
      </div>
      <a
        class="btn"
        url="/about/recharge?cbUrl=/pages/paymentCode/paymentCode"
        hover-class="none"
        >立即充值</a
      >
    </div>
  </div>
</template>
<script>
var wxOptions = {};
import uQRCode from "@/common/uqrcode.js";
var systemInfo, qrCodeSize, intervarID, countTime;
import { mapState } from "vuex";
export default {
  data() {
    return {
      token: "",
      codeType: -1
    };
  },
  computed: {
    ...mapState(["userInfo"])
  },
  onLoad(options) {
    wxOptions = options;
    this.codeType = options.type;
    uni.setNavigationBarTitle({
      title: options.type == 1 ? "我的二维码" : "订单核销码"
    });
  },
  onShow() {
    this.getQrCode();
  },
  onHide() {
    clearInterval(intervarID);
  },
  onUnload() {
    clearInterval(intervarID);
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    getQrCode() {
      uni.showLoading({
        title: "刷新中..."
      });
      this.$api
        .getQrCode({ type: wxOptions.type, third_no: wxOptions.order_no })
        .then(res => {
          if (res.code == 200) {
            let { token, url } = res.data;
            this.token = token;
            this.make(url);
            uni.hideLoading();
          }
        });
    },
    make(text) {
      uQRCode.make({
        canvasId: "qrcode",
        componentInstance: this,
        text: text,
        size: uni.upx2px(408),
        margin: 10,
        backgroundColor: "#ffffff",
        foregroundColor: "#000000",
        fileType: "jpg",
        correctLevel: uQRCode.defaults.correctLevel,
        success: res => {
          if (this.codeType == 1) {
            countTime = 58;
            intervarID = setInterval(() => {
              countTime--;
              if (countTime < 0) {
                clearInterval(intervarID);
                this.getQrCode();
              }
            }, 1000);
          }
        }
      });
    }
  }
};
</script>

<style lang="scss">
.payment-code {
  background: #f4f4f4;
  min-height: 100vh;
  color: #333;
  font-size: 28rpx;
  padding: 70rpx;
  box-sizing: border-box;
  .footer-box {
    display: flex;
    line-height: 120rpx;
    background: #fff;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: space-between;
    align-items: center;
    padding: 0 60rpx;
    .left {
      display: flex;
      align-items: center;
      .icon {
        width: 40rpx;
        height: 40rpx;
        background: url(https://media.wxcwy.com/mini/images/shb_icon@2x.png) no-repeat center center;
        background-size: 100% 100%;
      }
      .txt {
        margin: 0 10rpx;
        font-size: 32rpx;
        font-weight: 500;
      }
      .number {
        color: #ff7900;
        font-size: 44rpx;
        font-weight: bold;
      }
    }
    .btn {
      height: 64rpx;
      line-height: 64rpx;
      background: linear-gradient(
        270deg,
        rgba(44, 172, 255, 1) 0%,
        rgba(40, 123, 252, 1) 100%
      );
      border-radius: 8rpx;
      padding: 0 30rpx;
      color: #ffffff;
      font-size: 26rpx;
    }
  }
  .img-size-100 {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .main {
    background: #ffffff;
    border-radius: 20rpx;
    padding: 120rpx 0 80rpx;
    text-align: center;
    position: relative;
    .title {
      font-size: 32rpx;
      line-height: 44rpx;
    }
    .pic {
      width: 408rpx;
      height: 408rpx;
      margin: 80rpx auto 40rpx;
    }
    .close-btn {
      width: 64rpx;
      height: 64rpx;
      position: absolute;
      left: 0;
      right: 0;
      bottom: -200rpx;
      margin: 0 auto;
      background: url(https://media.wxcwy.com/mini/images/win_close_white@2x.png) no-repeat;
      background-size: 100%;
    }
    .tips {
      font-size: 28rpx;
    }
  }
}
</style>
